<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="loadXMLFile,parseXML,onXMLLoadFailed" />
  <title>HERE Maps API Example: Loading Marker Data from an XML file</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript" 
    data-params="maps,datarendering" 
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Loading XML Marker Data using AJAX</h1>
  <p>This example retrieves marker data from an XML file using AJAX.
    The data is held in a proprietory format and parsed using jQuery.
  </p>
  <p>The XML file is located at:
    <a href="./data/markers.xml">./data/markers.xml</a>
  </p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="marker,xml" type="text/javascript" >
//<![CDATA[
var map,
  container;

function parseXML(xml) {
  var nme,
    lat,
    lng,
    markerCoords;

  container = new nokia.maps.map.Container();
  $(xml).find('marker').each(function () {
    //Read the name, address, latitude and
    // longitude for each Marker
    nme = $(this).find('name').text();
    lat = $(this).find('lat').text();
    lng = $(this).find('lng').text();
    markerCoords = new nokia.maps.geo.Coordinate(
      parseFloat(lat, 10),
      parseFloat(lng, 10)
    );
    container.objects.add(new nokia.maps.map.StandardMarker(
      markerCoords,
      {text: nme}
    ));
  });
  map.objects.add(container);
  map.zoomTo(container.getBoundingBox(), false);
}

function onXMLLoadFailed() {
  alert('An Error has occurred.');
}

function loadXMLFile() {
  var filename = './data/markers.xml';
  $.ajax({
    type: 'GET',
    url: filename,
    dataType: 'xml',
    success: parseXML,
    error : onXMLLoadFailed
  });
}

function afterHereMapLoad(theMap) {
  map = theMap;
  loadXMLFile();
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>